<template>
  <div class="archive-page">
    <!-- <div class="header">
      <div class="title">文章归档</div>
      <div class="summary">好！目前共计 56 篇文章，继续努力</div>
    </div> -->
    <div class="timeline" v-for="(item, i) in list" :key="i">
      <div class="timeline-header">
        <h3>{{ item.date }}</h3>
      </div>
      <div class="timeline-body" v-for="(child, j) in item.list" :key="j">
        <span class="date">
          {{ child.day }}
        </span>
        <span class="title">
          {{ child.title }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Archive',
  data() {
    return {
      list: [
        {
          date: '2020年09月',
          list: [
            { title: 'ssssss', day: '09日' },
            { title: 'dddddd', day: '09日' },
            { title: 'eeeeee', day: '09日' },
          ],
        },
        {
          time: '2020年10月',
          list: [
            { title: 'ssssss', day: '09日' },
            { title: 'dddddd', day: '09日' },
            { title: 'eeeeee', day: '09日' },
          ],
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.archive-page {
  padding: 8px 15px;
  background-color: #fff;
  border-radius: 6px;
  overflow: hidden;
  // .header {
  // }
  .timeline {
    // .timeline-header {
    // }
    .timeline-body {
      position: relative;
      padding: 15px 0 15px 20px;
      &::before {
        position: absolute;
        content: '';
        display: block;
        height: 100%;
        margin-left: 6em;
        border-color: #dee5e7;
        border-style: solid;
        border-width: 0 0 0 4px;
        z-index: 1;
      }
      &::after {
        position: absolute;
        content: '';
        top: 15px;
        left: 0;
        // float: left;
        width: 10px;
        height: 10px;
        // margin-left: -27px;
        background: rgb(237, 241, 242);
        border-color: inherit;
        border-style: solid;
        border-width: 3px;
        border-radius: 50%;
        // height: 100%;
        // margin-left: 6em;
        // border-color: #dee5e7;
        // border-style: solid;
        // border-width: 0 0 0 4px;
        z-index: 2;
      }
      span {
        display: inline-block;
        padding: 10px 15px;
        border-radius: 4px;
        &.title {
          position: relative;
          background-color: #1890ff;
          &::before {
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            border: 5px solid transparent;
            border-right-color: #1890ff;
          }
        }
        &.date {
          margin-right: 40px;
        }
      }
    }
  }
}
</style>
